<template>
	<view class="patient-record">
		<headerview></headerview>
		<view class="">
			<view>
				<view class="charts">
					<view>
						<view class="chaoshengbo">
							<image
								src="../static/image/Bitmap@2x.png"
								mode=""
							></image>
						</view>
					</view>
				</view>
			</view>
			<!-- <div class="right-content fr">
        <div
          class="right-c-nr1"
          @click="ecgdetail"
        >
          <ul class="r-c-n1-t clearFix">
            <li class="li1">
              <p class="clearFix p1">
                <span class="fl">ECG</span>
                <span class="fr">bpm</span>
              </p>
              <p class="p2">{{ECG}}</p>
              <p class="p3">{{bpm}}</p>
            </li>
            <li class="li2">
              <p class="clearFix p1">
                <span class="fl">NIBP {{nibpType}}</span>
                <span class="fr">mmHg</span>
              </p>
              <p class="p2">{{NIBP}}<span>(--)</span></p>
              <p class="p3">{{mmHg}}</p>
            </li>
            <li class="li3">
              <p class="clearFix p1">
                <span class="fl">SpO2</span>
                <span class="fr">%</span>
              </p>
              <p class="p2">{{SpO2}}</p>
              <p class="p3">50~120</p>
              <p class="p4">PR- -<br>P I- -</p>
            </li>
          </ul>
          <ul class="r-c-n1-ul clearFix">
            <li class="li1">
              <p class="clearFix p1">
                <span class="fl">Resp</span>
                <span class="fr">rpm</span>
              </p>
              <p class="p2">{{Resp}}</p>
              <p class="p3">{{rpm}}</p>
            </li>
            <li class="li2">
              <p class="clearFix p1">
                <span class="fl">Art</span>
                <span class="fr">rpm</span>
              </p>
              <p class="p2">{{Art}}</p>
              <p class="p3">{{rpm}}</p>
            </li>
            <li class="li3">
              <p class="clearFix p1">
                <span class="fl">TEMP</span>
                <span class="fr">bpm</span>
              </p>
              <p class="clearFix p2">
                <span class="fl">T1- - </span>
                <span class="fr">T2- -</span>
              </p>
              <p class="p3">0~30</p>
            </li>
            <li class="li4">
              <p class="clearFix p1">
                <span class="fl">CO2</span>
                <span class="fr">mmol/L</span>
              </p>
            </li>
          </ul>
          <div class="r-c-n1-b">
            <img
              src="../../assets/images/xdt.png"
              class="img"
            >
          </div>
        </div>
        <div
          class="right-c-nr2"
          @click="brdetail"
        >
          <div class="right-c-nr2-title">
            气源压力低于 2.7 bar
            <span class="fr">A/C</span>
          </div>
          <div class="right-c-nr2-top">
            <ul class="w60 fl r-l-nr clearFix">
              <li class="">
                <img src="../../assets/images/ye.png">
              </li>
              <li class="">
                <img src="../../assets/images/et.png">
              </li>
              <li class="">
                <img src="../../assets/images/cr.png">
              </li>
            </ul>
            <ul class="w103 fl r-l-ul">
              <li>
                <p class="p1 clearFix">
                  <span class="fl">Vti</span>
                  <span class="fr">ml</span>
                </p>
                <p class="p2">{{Vti}}</p>
              </li>
              <li>
                <p class="p1 clearFix">
                  <span class="fl">Fsp</span>
                  <span class="fr">1/min</span>
                </p>
                <p class="p2">{{Fsp}}</p>
              </li>
              <li>
                <p class="p1 clearFix">
                  <span class="fl">Mvi</span>
                  <span class="fr">L/min</span>
                </p>
                <p class="p2">{{Mvi}}</p>
              </li>
              <li>
                <p class="p1 clearFix">
                  <span class="fl">ETCO2</span>
                  <span class="fr">kpa</span>
                </p>
                <p class="p2">{{ETCO2}}</p>
              </li>
            </ul>
            <div class="r-l-w440 fl">
              <div class="r-l-w440-top">
                <img src="../../assets/images/qy.png">
              </div>
              <ul class="r-l-w440-bottom">
                <li>
                  <span class="fl">FiO2</span>
                  <span class="fr">{{FiO2}}</span>
                </li>
                <li>
                  <span class="fl">Ppeak</span>
                  <span class="fr">{{Ppeak}} min</span>
                </li>
                <li>
                  <span class="fl">Pmax</span>
                  <span class="fr">{{Pmax}} mbar</span>
                </li>
              </ul>
            </div>
          </div>
          <ul class="right-c-nr2-bottom">
            <li>
              <span>Vt</span>
              <span>{{Vt}}ml</span>
            </li>
            <li>
              <span>I ：E</span>
              <span>1:1.7</span>
            </li>
            <li>
              <span>Freq</span>
              <span>Freq</span>
              <span>min</span>
            </li>
            <li>
              <span>Pmax</span>
              <span>{{Pmax}}</span>
              <span>mbar</span>
            </li>
          </ul>
        </div>
        <div
          class="right-c-nr3"
          @click="lzsdetail"
        >
          <!-- 连接诊疗室-房号 -->
			<!-- <div
            id="videos"
            style="width: 578px;height: 261px;background-color: #f0f0f0;"
          >

          </div>
        </div> -->
			<!-- 未接入呼吸机情况 如果未接入，则显示ecg-content，隐藏right-c-nr2、right-c-nr3-->
			<!-- <div class="ecg-content">
						
					</div> -->
			<!-- </div> -->
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue'
	import headerview from '@/components/headerView.vue';
	export default {
		components: { uniSegmentedControl,headerview },
		data() {
			return {
				items: ['普通病历', '卒中NHISS评分'],
				current: 0,
				dType: 1,
				patient120: {},
				dispatchCase: {},
				index: 1,
				answerList: {},
				rtc: {},
			}
		},
		onLoad() {
			this.carInfo()
			this.getAnswer()
			this.call()
		},
		methods: {
			// 返回
			onPath() {
				uni.redirectTo({
					url: './patientRecord',
				})
			},
			huxiji() {
				uni.navigateTo({
					url: 'huxiji',
					success: (res) => {},
					fail: () => {},
					complete: () => {},
				})
			},
			xindiantu() {
				uni.navigateTo({
					url: 'xindiantu',
					success: (res) => {},
					fail: () => {},
					complete: () => {},
				})
			},
			call() {
				let _this = this

				// rtc object
				_this.rtc = {
					client: null,
					joined: false,
					published: false,
					localStream: null,
					remoteStreams: [],
					params: {},
				}

				// Options for joining a channel
				var option = {
					appID: '9c3a9d03dac14f2cbcb2dcaa63d2a48a',
					channel: 'test1',
					uid: 123456756,
					userRole: 1,
				}

				// Create a client
				_this.rtc.client = AgoraRTC.createClient({
					mode: 'rtc',
					codec: 'h264',
				})

				// Initialize the client
				_this.rtc.client.init(
					option.appID,
					function () {
						console.log('init success')
					},
					(err) => {
						console.error(err)
					}
				)

				// Join a channel
				_this.rtc.client.join(
					option.token ? option.token : null,
					option.channel,
					option.uid ? +option.uid : null,
					function (uid) {
						console.log(
							'join channel: ' +
								option.channel +
								' success, uid: ' +
								uid
						)
						_this.rtc.params.uid = uid
					},
					function (err) {
						console.error('client join failed', err)
					}
				)
				// Create a local stream
				_this.rtc.localStream = AgoraRTC.createStream({
					streamID: 'abc',
					audio: true,
					video: true,
					screen: false,
				})
				// Initialize the local stream
				_this.rtc.localStream.init(
					function () {
						console.log('init local stream success')
						// Publish the local stream
						_this.rtc.client.publish(
							_this.rtc.localStream,
							function (err) {
								console.log('publish failed')
								console.error(err)
							}
						)
						// play stream with html element id "local_stream"
						_this.rtc.localStream.play('local_stream')
						_this.rtc.published = true
					},
					function (err) {
						console.error('init local stream failed ', err)
					}
				)

				_this.rtc.client.on('stream-added', function (evt) {
					var remoteStream = evt.stream
					var id = remoteStream.getId()
					if (id !== _this.rtc.params.uid) {
						_this.rtc.client.subscribe(remoteStream, function (
							err
						) {
							console.log('stream subscribe failed', err)
						})
					}
					console.log('stream-added remote-uid: ', id)
				})
				_this.rtc.client.on('stream-subscribed', function (evt) {
					var remoteStream = evt.stream
					var id = remoteStream.getId()
					// Add a view for the remote stream.
					_this.rtc.remoteStreams.push(remoteStream)
					_this.addView(id)
					// Play the remote stream.
					remoteStream.play('remote_video_' + id)
					console.log('stream-subscribed remote-uid: ', id)
				})
			},
			addView(id, show) {
				if (id.toString().substring(0, 1) === 2) {
					if (!$('#' + id)[0]) {
						$('<div/>', {
							id: 'remote_video_panel_' + id,
							class: 'video-view',
							style: 'width:346px;height:246px;float:right',
						}).appendTo('#video')

						$('<div/>', {
							id: 'remote_video_' + id,
							class: 'video-placeholder',
							style: 'width:346px;height:246px',
						}).appendTo('#remote_video_panel_' + id)

						$('<div/>', {
							id: 'remote_video_info_' + id,
							class: 'video-profile ' + (show ? '' : 'hide'),
							style: 'width:346px;height:246px',
						}).appendTo('#remote_video_panel_' + id)

						$('<div/>', {
							id: 'video_autoplay_' + id,
							class: 'autoplay-fallback hide',
							style: 'width:346px;height:246px',
						}).appendTo('#remote_video_panel_' + id)
					}
				}
				if (!$('#' + id)[0]) {
					$('<div/>', {
						id: 'remote_video_panel_' + id,
						class: 'video-view',
						style: 'width:100%;height:478px;',
					}).appendTo('#video')

					$('<div/>', {
						id: 'remote_video_' + id,
						class: 'video-placeholder',
						style: 'width:100%;height:478px;',
					}).appendTo('#remote_video_panel_' + id)

					$('<div/>', {
						id: 'remote_video_info_' + id,
						class: 'video-profile ' + (show ? '' : 'hide'),
						style: 'width:100%;height:478px;',
					}).appendTo('#remote_video_panel_' + id)

					$('<div/>', {
						id: 'video_autoplay_' + id,
						class: 'autoplay-fallback hide',
						style: 'width:100%;height:478px;',
					}).appendTo('#remote_video_panel_' + id)
				}
			},
			removeView(id) {
				if ($('#remote_video_panel_' + id)[0]) {
					$('#remote_video_panel_' + id).remove()
				}
			},
			jieshu() {
				let _this = this
				// Leave the channel
				_this.rtc.client.leave(
					function () {
						// Stop playing the local stream
						_this.rtc.localStream.stop()
						// Close the local stream
						_this.rtc.localStream.close()
						// Stop playing the remote streams and remove the views
						while (_this.rtc.remoteStreams.length > 0) {
							var stream = _this.rtc.remoteStreams.shift()
							var id = stream.getId()
							stream.stop()
							_this.removeView(id)
						}
						console.log('client leaves channel success')
					},
					function (err) {
						console.log('channel leave failed')
						console.error(err)
					}
				)
			},
			carInfo() {
				this.$http
					.postForm(`/api/pad/v1/dispatch/case/getOne`, { id: 25 })
					.then((res) => {
						this.patient120 = res.data.patient120
						this.dispatchCase = res.data.dispatchCase
					})
			},
			getAnswer() {
				this.$http
					.postForm(`/api/pad/v1/nhiss/answer/appGetAnswer`, {
						dispatchId: 25,
					})
					.then((res) => {
						this.answerList = res.data
					})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			diaoduBtn() {
				this.index = 1
			},
			patientBtn() {
				this.index = 2
			},
			zhenduanBtn() {
				this.index = 3
			},
			changeSelect(type) {
				if (this.dType !== type) this.dType = type
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		background: #ffffff;
	}
	.patient-record {
		.con-header {
			display: flex;
			justify-content: space-between;
			padding: 0 23.75px 0 45.91px;
			height: 63px;
			line-height: 63px;
			width: 100%;
			background: rgba(49, 131, 224, 1);
			color: #ffffff;
			font-size: 14px;
			box-sizing: border-box;
			.logout {
				display: inline-block;
				width: 99.75px;
				height: 30.08px;
				background: rgba(28, 112, 207, 1);
				border-radius: 15.83px;
				vertical-align: middle;
				line-height: 30.08px;
				text-align: center;
				font-size: 11.08px;
				font-weight: 600;
				margin-left: 47.5px;
				&::before {
					content: '';
					position: absolute;
					background: url(../static/image/caozuo_zhuxiao_tuichudenglu@2x.png);
					width: 12.66px;
					height: 13.45px;
					background-size: 100% 100%;
					margin: 9.5px 0 0 -19px;
				}
			}
		}
		.con-content {
			display: flex;
			justify-content: space-between;
			padding: 19.79px 16.62px;
			.con-video {
				width: 1182.76px;
				// height: 758.42px;
				// background:rgba(39,39,39,1);
				margin-right: 7.91px;
				position: relative;
			}
		}
		.con-box {
			width: 297.67px;
			// height:266px;
			border: 1px solid rgba(226, 226, 226, 1);
			padding: 11.87px 15.83px 19px;
			box-sizing: border-box;
			margin-bottom: 7.91px;
			.con-tab {
				display: flex;
				justify-content: space-between;
				font-size: 12.66px;
				color: #888888;
				line-height: 25.33px;
				.active {
					width: 79.16px;
					height: 25.33px;
					background: rgba(49, 131, 224, 1);
					border-radius: 12.66px;
					color: #ffffff;
					text-align: center;
				}
			}
			.con-des {
				margin-top: 15.83px;
				font-size: 12.66px;
				line-height: 39.58px;
				view text {
					&:nth-child(1) {
						color: rgba(49, 131, 224, 1);
					}
				}
			}
			.con-des2 {
				margin-top: 15.83px;
				font-size: 12.66px;
				line-height: 39.58px;
				view {
					display: flex;
					justify-content: space-between;
					text {
						&:nth-child(2) {
							color: rgba(49, 131, 224, 1);
						}
					}
				}
			}
		}
		.segmented-control {
			background: #f0f7ff;
			margin-top: 0;
			height: 95.13px;
			// color: #333333;
		}
		.patient-record-content {
			.patient-record-tags {
				display: flex;
				justify-content: space-between;
				padding: 50.69px 36.11px 78.47px 42.36px;
				.patient-record-tag {
					text-align: center;
					font-size: 29.16px;
					color: #c3c3c3;
					image {
						margin-right: 20.83px;
						vertical-align: bottom;
					}
					.jijiu {
						width: 39.58px;
						height: 38.19px;
					}
					.fill1 {
						width: 31.94px;
						height: 31.94px;
					}
					.fill2 {
						width: 32.63px;
						height: 32.63px;
					}
				}
				.active {
					color: rgba(49, 131, 224, 1);
				}
			}
			.patient-info {
				padding-left: 27.77px;
				font-size: 25px;
				view {
					text {
						color: rgba(144, 144, 144, 1);
					}
				}
				.patient-info-line {
					height: 0.69px;
					background: rgba(222, 222, 222, 1);
					margin: 29.16px 0 33.33px;
				}
				.patient-address {
					display: flex;
					padding-right: 27.08px;
					view {
						&:first-child {
							color: rgba(144, 144, 144, 1);
						}
						&:last-child {
							flex: 1;
						}
					}
				}
			}
			.patient-des-total {
				margin: 27.77px;
				width: 694.44px;
				height: 95.13px;
				line-height: 95.13px;
				background: rgba(245, 246, 250, 1);
				font-size: 29.16px;
				padding-left: 27.77px;
				box-sizing: border-box;
				text {
					color: rgba(49, 131, 224, 1);
					margin-right: 20.83px;
				}
			}
			.patient-des {
				font-size: 25px;
				padding: 0 27.77px;
				.patient-des-item {
					display: flex;
					text {
						&:first-child {
							width: 60%;
						}
						&:nth-child(2) {
							width: 30%;
						}
						&:last-child {
							width: 10%;
						}
					}
				}
				.patient-des-item-title {
					font-size: 29.16px;
					color: rgba(149, 153, 157, 1);
					line-height: 43.75px;
					margin-bottom: 41.66px;
				}
				.patient-des-line {
					height: 0.69px;
					background: rgba(222, 222, 222, 1);
					margin: 29.16px 0 33.33px;
				}
			}
		}
		.charts {
			// width:297.67px;
			// height:115.58px;
			// border:1.58px solid rgba(226,226,226,1);
			font-size: 7.91px;
			font-family: HelveticaNeue-Medium, HelveticaNeue;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			margin-top: 10vh;
			.xindiantu-top {
				display: flex;
				border-top: 1px solid rgba(226, 226, 226, 1);
				border-bottom: 1px solid rgba(226, 226, 226, 1);
				.left {
					width: 25%;
					padding: 7.91px;
					border-left: 1px solid rgba(226, 226, 226, 1);
					.left-top,
					.left-bottom {
						display: flex;
						justify-content: space-between;
					}
					.left-bottom {
						margin-top: 9.5px;
						align-items: baseline;
					}
				}
				.middle {
					width: 42%;
					padding: 7.91px;
					border-left: 1px solid rgba(226, 226, 226, 1);
					border-right: 1px solid rgba(226, 226, 226, 1);
					.middle-top {
						display: flex;
						justify-content: space-between;
					}
					.middle-bottom {
						display: flex;
						justify-content: space-between;
						margin-top: 9.5px;
						.tr {
							text-align: right;
						}
					}
				}
				.right {
					width: 33%;
					padding: 7.91px;
					border-right: 1px solid rgba(226, 226, 226, 1);
					.right-top {
						display: flex;
						justify-content: space-between;
					}
					.right-bottom {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
					}
				}
			}
			.xindiantu-bottom {
				display: flex;
				border-bottom: 1px solid rgba(226, 226, 226, 1);
				.left {
					width: 25%;
					padding: 7.91px;
					border-left: 1px solid rgba(226, 226, 226, 1);
					.left-top {
						display: flex;
						justify-content: space-between;
					}
					.left-middle {
						text-align: center;
					}
					.left-bottom {
						text-align: right;
					}
				}
				.middle1 {
					width: 25%;
					padding: 7.91px;
					border-left: 1px solid rgba(226, 226, 226, 1);
					.middle1-top {
						display: flex;
						justify-content: space-between;
					}
					.middle1-middle {
						text-align: center;
					}
					.middle1-bottom {
						text-align: right;
					}
				}
				.middle2 {
					width: 25%;
					padding: 7.91px;
					border-left: 1px solid rgba(226, 226, 226, 1);
					.middle2-top {
						display: flex;
						justify-content: space-between;
					}
					.middle2-middle {
						text-align: center;
						line-height: 23.75px;
					}
					.middle2-bottom {
						text-align: right;
					}
				}
				.right {
					width: 25%;
					padding: 7.91px;
					border-left: 1px solid rgba(226, 226, 226, 1);
					border-right: 1px solid rgba(226, 226, 226, 1);
					.right-top {
						display: flex;
						justify-content: space-between;
					}
				}
			}
			.font15 {
				font-size: 23.75px;
				font-family: Arial-BoldMT, Arial;
			}
			.xindiantu-chart {
				width: 297.67px;
				height: 53.83px;
				text-align: center;
				border: 1px solid rgba(226, 226, 226, 1);
				border-top: 0;
				box-sizing: border-box;
				image {
					width: 267.58px;
					height: 30.08px;
					margin-top: 11.87px;
				}
			}
			.huxiji {
				font-size: 7.91px;
				font-family: HelveticaNeue-Medium, HelveticaNeue;
				font-weight: 500;
				margin-top: 7.91px;
				.huxiji-top {
					display: flex;
					justify-content: space-between;
					border: 1px solid rgba(240, 240, 240, 1);
					padding: 3.16px 7.91px;
					view {
						.img1 {
							width: 11.87px;
							height: 6.33px;
						}
						.img2 {
							width: 7.91px;
							height: 5.54px;
						}
					}
				}
				.huxiji-left {
					display: flex;
					.huxiji-image {
						display: flex;
						flex-direction: column;
						height: 123.5px;
						justify-content: space-around;
						// align-items: center;
						view {
							height: 41.16px;
							width: 31.66px;
							border-bottom: 1px solid rgba(240, 240, 240, 1);
							text-align: center;
							line-height: 55.16px;
							border-left: 1px solid rgba(240, 240, 240, 1);
						}
						.img1 {
							width: 14.96px;
							height: 21.37px;
						}
						.img2 {
							width: 13.45px;
							height: 21.37px;
						}
						.img3 {
							width: 11.08px;
							height: 21.37px;
						}
					}
					.huxiji-middle {
						width: 53.83px;
						.top {
							padding: 2.37px;
							border: 1px solid rgba(240, 240, 240, 1);
							border-top: 0;
						}
						.middle-top {
							display: flex;
							justify-content: space-between;
						}
						.middle-bottom {
							margin-top: 6.33px;
							font-size: 9.5px;
							font-family: Arial-BoldMT, Arial;
							font-weight: normal;
							text-align: center;
						}
					}
				}
				.huxiji-right {
					flex: 1;
					.right-bottom {
						display: flex;
						justify-content: space-between;
						.item {
							display: flex;
							justify-content: space-between;
							padding: 4.75px 7.91px;
							border-top: 1px solid #f0f0f0;
							border-right: 1px solid #f0f0f0;
						}
					}
				}
			}
			.chaoshengbo {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 978.26px;
				// height:575.36px;
				// border:1px solid rgba(226,226,226,1);
				margin-top: 7.91px;
				margin: auto;
				image {
					width: 978.26px;
					height: 575.36px;
				}
			}
		}
	}

	.agora-theme .collapsible-header {
		border: none;
	}

	.agora-theme .btn-primary {
		color: #fff;
		background-color: #1e88e5 !important;
	}

	.agora-theme .agora-github-pin {
		background: url('')
			no-repeat round;
		width: 55px;
		height: 55px;
		position: absolute;
		right: 0;
	}

	.agora-theme .agora-primary-bg {
		color: #fff;
		background-color: #1e88e5 !important;
		align-items: center;
	}

	.agora-theme .card.container {
		margin-left: 20px;
	}

	.agora-theme h5 {
		margin: 0;
		margin-left: 20px;
	}

	.agora-theme nav {
		height: 55px;
	}

	.agora-theme .agora-secondary-border {
		border: 1px solid #424242 !important;
	}

	.agora-theme .agora-secondary-bg {
		color: #fff;
		background-color: #424242 !important;
		align-items: center;
	}

	.agora-theme .switch {
		height: 55px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.agora-theme .switch h6 {
		margin: 0;
	}

	.agora-theme #local_stream {
		position: relative;
	}

	.agora-theme #local_video_info {
		position: absolute;
	}

	.agora-theme .video-view {
		position: absolute;
		right: 17.41px;
		bottom: 20.58px;
		width: 205.83px;
		height: 121.91px;
		z-index: 99;
		// width: 100%;
		// height: 100%;
		// top: 0;
		// bottom: 0;
		// position: fixed;
		// right: 0;
		// left: 0;
	}

	// .agora-theme .video-view {
	//   width: 480px;
	//   height: 320px; }
	.agora-theme .video-placeholder {
		width: 205.83px;
		height: 121.91px;
	}
	.agora-theme #local_stream,
	.agora-theme #local_video_info {
		// width: 100%;
		// height: 100%;
	}

	.agora-theme .video-profile {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		z-index: 2;
		color: #fff;
		opacity: 0.9;
		text-shadow: black 0.1em 0.1em 0.2em;
		font-size: 10px;
	}

	.agora-theme .video-grid {
		// display: grid;
		position: relative;
		grid-gap: 20px;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: auto;
	}

	.agora-theme .autoplay-fallback {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		// width: 100%;
		// height: 100%;
		top: 0;
		display: block;
		cursor: pointer;
	}
	.agora-theme .autoplay-fallback::after {
		font-size: 1.5rem;
		opacity: 0.9;
		text-shadow: black 0.1em 0.1em 0.2em;
		display: block;
		color: #fff;
	}

	.uni-tip-group-button {
		position: absolute;
		bottom: 12.9px;
		left: 11.14px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		text-align: center;
		button {
			width: 103.81px;
			height: 34.6px;
			line-height: 34.6px;
			background: rgba(90, 90, 90, 1);
			border-radius: 15.93px;
			font-size: 10.55px;
			opacity: 0.59;
			margin-left: 25.8px;
			color: #ffffff;
			&:nth-child(1)::before {
				content: '';
				position: absolute;
				background: url('./../static/image/Fill 1@2x (3).png');
				width: 14.06px;
				height: 14.06px;
				background-size: 100% 100%;
				margin: 9.38rpx 0 0 -20.62px;
			}
			&:nth-child(2)::before {
				content: '';
				position: absolute;
				background: url(./../static/image/tuichu@2x.png);
				width: 14.06px;
				height: 14.06px;
				background-size: 100% 100%;
				margin: 9.38px 0 0 -20.62px;
			}
			&:nth-child(3) {
				background: #fd3b2f;
				&::before {
					content: '';
					position: absolute;
					background: url(./../static/image/jieshu@2x.png);
					width: 14.06px;
					height: 14.06px;
					background-size: 100% 100%;
					margin: 9.38px 0 0 -20.62px;
				}
			}
		}
		image {
			width: 90px;
			height: 90px;
		}
	}
	.onPath {
		width: 230px;
		height: 63px;
		line-height: 63px;
		background: url('../static/image/Fill_1.png') no-repeat;
		background-position-x: 1px;
		background-position-y: 20px;
		padding-left: 10px;
		position: absolute;
		top: 0px;
		left: 40px;
		color: #ffffff;
		padding: 0;
		border: 0;
		float: left;
	}
	uni-button:after {
		content: none;
	}
	uni-button {
		font-size: 14px;
	}
</style>
